import React,{Component} from 'react';
import moment from 'moment';
import 'moment/locale/zh-cn';
export default class MessageList extends Component{
   render(){
       return (
           <div className="panel-body">
                <ul className="list-group">
                    {
                        this.props.messages.map(item=>(
                            <li className="list-group-item" key={item.id}>
                                {item.username}:{item.content} 
                                <span className="pull-right">
                                {moment(item.createAt).fromNow()}&nbsp;&nbsp;
                                <button 
                                   onClick={()=>this.props.delMessage(item.id)}
                                   className="btn btn-danger btn-xs">删除</button>
                                </span>
                            </li>
                        ))
                    }
                </ul>
           </div>
       )
   }
}